<template>
  <div class="outbox">
  <div class="sec-border"></div>
  <div class="first-border"></div>
  <div id="main" class="main text-white">
      <ul>
      <li><input v-model="username" type="text" placeholder="Username"></li>
      <li><input v-model="password" type="password" placeholder="Password"></li>
      <li><button @click="login">LOGIN</button></li>
    </ul>
  </div>
</div>
</template>

<script>
// @ is an alias to /src

import axios from 'axios';
export default {
  name: 'LoginView',
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods:{
    async login(){
      let data ={
        username:this.username,
        password:this.password
      }
      try{
        axios.request({
          method:'post',
          data:data,
          url:'/api/login'
        })
        this.getLoginInfo()
        
      }catch(err){
        if(err == undefined){
          return
        }
        
      }
    },
    async getLoginInfo(){
      setTimeout(()=>{
        console.log("waiting login")
      },2000)
      try{
        let response = await axios.request({
          method:"post",
          url:'/api/get_login_info'
        })
        console.log(response)
        if(response.data.login == '1'){
          alert("登录成功")
          let data ={
            username:this.username
          }
          window.localStorage.setItem("username",this.username)
          alert("login Success :"+data.username)
          this.$router.push('/about')   
        }else{
          alert("用户名或者密码错误")
        }
      }catch(err){
        return
      }
    }
  }
}
</script>
<style scoped>
  .outbox{
    width:100%;
    height: 100%;

    perspective: 800px;
  }
  .sec-border,.first-border{
    position:absolute;
    left:50%;
    top:50%;
  }
  @keyframes shake {
            0% { transform:translate(-50%,-50%) skew(-1deg,3deg)  rotateX(13deg) rotateY(-12deg) scale(1.2,1.2);}
          
            45% { transform:translate(-50%,-50%) skew(-3deg,4deg)  rotateX(14deg) rotateY(-14deg) scale(1.2,1.2);}
            75% { transform:translate(-50%,-50%) skew(-4deg,3deg)  rotateX(14deg) rotateY(-15deg) scale(1.2,1.2);}

            100% { transform:translate(-50%,-50%) skew(-1deg,3deg)  rotateX(13deg) rotateY(-12deg) scale(1.2,1.2);} 
        }

  .sec-border{
    width: 400px;
    height: 300px;
    background-color: white;
    transform:translate(-50%,-50%) skew(-1deg,3deg)  rotateX(13deg) rotateY(-12deg) scale(1.2,1.2);
    box-shadow: 5px 5px 10px 10px rgb(73, 71, 71);
    animation-name: shake;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
  }
  .first-border{
    width: 400px;
    height: 300px;
    background-color: black;
    transform:translate(-50%,-50%) skew(-2deg,3deg)  rotateX(13deg) rotateY(-15deg) scale(1.1,1.1);
  }
  .main{
    position:absolute;
    left:50%;
    top:50%;
    width:400px;
    height:300px;
    transform:translate(-50%,-50%) skew(-2deg,3deg) rotateX(12deg) rotateY(-18deg);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(134, 8, 8);
    
    transition-duration: 0.5s;
}

.main li{
  
  list-style-type:none;
  text-align:center;
  padding-top:10px;


}

li input{
  font-size:20px;
  border:none;
  box-sizing:border-box;
  padding:5px;
  background:transparent;
  border-bottom:1px solid white;
  color:white;
}
li button{
  font-size:20px;
  border:1px solid white;
  padding:5px;
  background:transparent;
  color:white;
  border-radius:5px;
  width:150px;
  margin-top:10px;
  transition:0.2s linear;
}
li button:hover{
  background:white;
  color:black;
  border:1px solid black;
}


</style>
